<template>
	<view class="base-info" v-if="info.store_name">
		<view class="base-info-container">
			<view class="price">
				<view class="market-price">
					￥
					<text>{{ info.price }}</text>
					起
				</view>
				<view class="vip-price">
					￥{{ info.vip_price }}
					<image :src="vipIcon"></image>
				</view>
				<view class="share iconfont icon-fenxiang"></view>
			</view>
			<view class="name">{{ info.store_name }}</view>
			<view class="stock">
				<text>原价：￥{{ info.ot_price }}</text>
				<text>库存：{{ info.stock }} {{ info.unit_name }}</text>
				<text>销量：{{ info.fsales }} {{ info.unit_name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import vipIcon from '@/static/images/jvip.png'
	export default {
		props: {
			info: {
				type: Object,
				default: () => {}
			}
		},
		data () {
			return {
				vipIcon
			}
		}
	}
</script>

<style lang="scss" scoped>
.base-info {
	background-color: #fff;
	&-container {
		.price {
			position: relative;
			display: flex;
			align-items: flex-end;
			padding-top: 24rpx;
			font-size: 28rpx;
			font-weight: 700;
			margin: 0 30rpx;
			.market-price {
				color: #fc4141!important;
				text {
					font-size: 48rpx;
				}
			}
			.vip-price {
				color: #282828;
				margin-left: 12rpx;
				image {
					width: 46rpx;
					height: 22rpx;
				}
			}
			.share {
				position: absolute;
				right: 30rpx;
				bottom: 10rpx;
				color: #515151;
				font-size: 40rpx;
			}
		}
		.name {
			font-size: 32rpx;
			font-weight: 700;
			margin: 22rpx 30rpx 0 30rpx;
			word-break: break-all;
		}
		.stock {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #82848f;
			padding-bottom: 20rpx;
			margin: 22rpx 30rpx 0;
		}
	}
}
</style>